<script setup lang="ts">
import SysDialog from '@/components/SysDialog/index.vue';
import useRecord from '@/composables/custcare/talk/useRecord';
import useDialog from '@/hooks/useDialog';

// 弹框
const { dialog, onShow, onClose } = useDialog()

const { onConfirm, show, messageList, emotion } = useRecord(dialog, onShow, onClose)

// 暴露方法给外部使用
defineExpose({
    show
})
</script>


<template>
    <SysDialog :title="dialog.title" :height="500" :visible="dialog.visible" @onClose="onClose" @onConfirm="onConfirm">
        <template v-slot:content>
            <div class="talk-layout">
                <div class="main-body" id="messageList">
                    <div :class="['direct-chat-msg', msg.msg_type]" v-for="msg in messageList.list">
                        <div class="avatar" v-if="msg.msg_type == 'right'">
                            <img class="direct-chat-img" :src="msg.avatar" />
                        </div>
                        <div class="msg">
                            <div class="direct-chat-info">
                                <span class="direct-chat-name" v-if="msg.msg_type == 'left'">
                                    {{ msg.client_ip }}
                                </span>
                                <span class="direct-chat-timestamp">{{ msg.send_time_text }}</span>
                            </div>
                            <div class="direct-chat-text" v-if="msg.type == 1"
                                v-html="msg.content.replace(/\:[a-z0-9-]+\:/gi, emotion)"></div>
                            <div class="direct-chat-text" v-else-if="msg.type == 2">
                                <img :src="msg.content" class="img" />
                            </div>
                            <div class="direct-chat-text" v-html="msg.content" v-else></div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </SysDialog>
</template>